<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { getCoursesAPI } from '@/pagesOrgan/services/course'
import type { CourseItem } from '@/types/course'
import CourseCard from './components/CourseCard.vue'

// 课程列表数据
const courseList = ref<CourseItem[]>([])
// 加载状态
const isLoading = ref(false)
// 分页参数
const pageParams = {
  pageNum: 1,
  pageSize: 10,
}
// 搜索参数
const searchParams = {
  subjects: '',
  subjectType: '',
}
// 下拉刷新状态
const isTriggered = ref(false)
// 获取课程列表
const getCourses = async () => {
  if (isLoading.value) return
  isLoading.value = true
  try {
    const res = await getCoursesAPI({ ...pageParams, ...searchParams })
    if (pageParams.pageNum === 1) {
      courseList.value = res.data.rows
    } else {
      courseList.value.push(...res.data.rows)
    }
    // 判断是否还有更多数据
    if (courseList.value.length >= res.data.total) {
      // 已加载全部
    } else {
      pageParams.pageNum++
    }
  } catch (error) {
    console.error('获取课程列表失败:', error)
    uni.showToast({ title: '获取课程列表失败', icon: 'none' })
  } finally {
    isLoading.value = false
    isTriggered.value = false
  }
}

// 刷新数据
const refreshData = () => {
  pageParams.pageNum = 1
  isTriggered.value = true
  getCourses()
}

// 加载更多
const loadMore = () => {
  getCourses()
}

// 搜索课程
const handleSearch = (type: string) => {
  if (type !== '0') {
    searchParams.subjectType = type
  } else {
    searchParams.subjectType = ''
  }
  pageParams.pageNum = 1
  getCourses()
}

// 跳转到添加课程页
const navigateToAdd = () => {
  uni.navigateTo({ url: '/pagesOrgan/course/addOrUpdate' })
}

// 组件挂载时获取数据
onMounted(() => {
  getCourses()
  // 监听添加/编辑课程后的刷新事件
  uni.$on('refreshCourseList', refreshData)
})

// 组件卸载时移除事件监听
onUnmounted(() => {
  uni.$off('refreshCourseList', refreshData)
})
</script>

<template>
  <view class="course-list-page">
    <!-- 搜索和筛选区 -->
    <view class="search-bar">
      <view class="search-input">
        <input
          type="text"
          v-model="searchParams.subjects"
          placeholder="搜索课程名称"
          @confirm="handleSearch('0')"
        />
        <view class="search-btn" @click="handleSearch('0')">搜索</view>
      </view>
      <view class="filter-bar">
        <view
          class="filter-item"
          :class="{ active: searchParams.subjectType === '' }"
          @click="handleSearch('0')"
          >全部</view
        >
        <view
          class="filter-item"
          :class="{ active: searchParams.subjectType === '1' }"
          @click="handleSearch('1')"
          >课程类</view
        >
        <view
          class="filter-item"
          :class="{ active: searchParams.subjectType === '2' }"
          @click="handleSearch('2')"
          >课时类</view
        >
      </view>
    </view>

    <!-- 课程列表 -->
    <scroll-view
      class="course-list"
      :scroll-y="true"
      @refresherrefresh="refreshData"
      :refresher-triggered="isTriggered"
      @scrolltolower="loadMore"
      refresher-enabled
    >
      <block v-if="courseList.length > 0">
        <CourseCard v-for="course in courseList" :key="course.id" :course="course" />
      </block>
      <block v-else>
        <view class="empty-state">
          <text>暂无课程数据</text>
        </view>
      </block>
      <!-- 加载中 -->
      <view class="loading-state" v-if="isLoading">
        <uni-load-more type="spin" size="large" text="加载中..."></uni-load-more>
      </view>
    </scroll-view>

    <!-- 添加课程按钮 -->
    <view class="add-btn" @click="navigateToAdd">
      <image class="add-icon" src="@/static/images/add.png"></image>
    </view>
  </view>
</template>

<style lang="scss">
.course-list-page {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
  box-sizing: border-box;
}

.search-bar {
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
}

.search-input {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.search-input input {
  flex: 1;
  height: 70rpx;
  padding: 0 20rpx;
  background-color: #f5f5f5;
  border-radius: 35rpx;
  font-size: 28rpx;
}

.search-btn {
  margin-left: 20rpx;
  padding: 0 30rpx;
  height: 70rpx;
  line-height: 70rpx;
  background-color: #409eff;
  color: #fff;
  border-radius: 35rpx;
  font-size: 28rpx;
}

.filter-bar {
  display: flex;
  justify-content: space-around;
}

.filter-item {
  padding: 10rpx 20rpx;
  font-size: 28rpx;
  color: #666;
}

.filter-item.active {
  color: #409eff;
  font-weight: bold;
  border-bottom: 4rpx solid #409eff;
}

.course-list {
  height: calc(100vh - 240rpx);
}

.course-item {
  padding: 10rpx 0;
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300rpx;
  color: #999;
  font-size: 28rpx;
}

.loading-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20rpx 0;
}

.loading-state text {
  margin-top: 10rpx;
  color: #999;
  font-size: 28rpx;
}

.add-btn {
  position: fixed;
  bottom: 60rpx;
  right: 40rpx;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: #409eff;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60rpx;
  box-shadow: 0 4rpx 20rpx rgba(64, 158, 255, 0.5);
  .add-icon {
    width: 40rpx;
    height: 40rpx;
    margin-bottom: 8rpx;
  }
}
</style>
